<template>
  <div>
    <el-drawer
      :title="!dataForm.id ? '新增' : '修改'"
      :visible="visible"
      size="80vw"
      @close="closeDialog"
      append-to-body>
      <div style="margin: 0px 40px 40px 40px">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="120px">

          <el-collapse v-model="activeNames">
            <el-collapse-item name="1">
              <template slot="title">
                <div>
                  <i class="header-icon el-icon-goods"></i>
                  <span class="title-size">抽奖信息</span>
                </div>
              </template>

              <el-row style="margin-top:20px">
                <el-col :span="12">
                  <el-form-item label="抽奖名称" prop="lotteryName">
                    <el-input v-model="dataForm.lotteryName" placeholder="请输入抽奖名称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="抽奖方式" prop="lotteryCate">
                    <el-select
                      v-model="dataForm.lotteryCate"
                      filterable
                      placeholder="请选择抽奖方式"
                      clearable
                      size="small"
                      class="margin-left-xs"
                      style="width:100%"
                    >
                      <el-option
                        v-for="dict in lotteryCateList"
                        :key="dict.value"
                        :label="dict.text"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="抽奖类型" prop="lotteryType">
                    <el-select
                      v-model="dataForm.lotteryType"
                      filterable
                      placeholder="请选择抽奖类型"
                      clearable
                      size="small"
                      class="margin-left-xs"
                      style="width:100%"
                    >
                      <el-option
                        v-for="dict in lotteryTypeList"
                        :key="dict.value"
                        :label="dict.text"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="最大次数" prop="maxCount" v-if="dataForm.lotteryType == lotteryTypeEnum.count">
                    <el-input v-model="dataForm.maxCount" placeholder="请输入最大次数"></el-input>
                  </el-form-item>
                  <el-form-item label="循环次数" prop="loopCount" v-if="dataForm.lotteryType == lotteryTypeEnum.loopCount">
                    <el-input v-model="dataForm.loopCount" placeholder="请输入循环次数"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="上架状态:" prop="status">
                    <el-radio-group v-model="dataForm.status">
                      <el-radio label="1" border>上架</el-radio>
                      <el-radio label="0" border>下架</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">

                </el-col>
              </el-row>

              <el-row>
                <el-form-item label="备注" prop="remark">
                  <el-input type="textarea" :rows="4" v-model="dataForm.remark" placeholder="备注"></el-input>
                </el-form-item>
              </el-row>
            </el-collapse-item>

            <el-collapse-item name="2">
              <template slot="title">
                <div>
                  <i class="header-icon el-icon-goods"></i>
                  <span class="title-size">兑换方式</span>
                </div>
              </template>

              <el-row style="margin-top:20px">
                <el-col :span="12">
                  <el-form-item label="兑换方式" prop="lotteryExchangeCate" >
                    <el-select
                      v-model="dataForm.lotteryExchangeCate"
                      filterable
                      placeholder="请选择兑换方式"
                      clearable
                      size="small"
                      class="margin-left-xs"
                      style="width:100%"
                    >
                      <el-option
                        v-for="dict in lotteryExchangeCateList"
                        :key="dict.value"
                        :label="dict.text"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="所需积分" prop="pointNum" v-if="dataForm.lotteryExchangeCate == lotteryExchangeCateEnum.point">
                    <el-input v-model="dataForm.pointNum" placeholder="请输入所需积分"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-collapse-item>

            <el-collapse-item name="3">
              <template slot="title">
                <div>
                  <i class="header-icon el-icon-goods"></i>
                  <span class="title-size">抽奖设置</span>
                </div>
              </template>

              <el-tabs type="border-card" style="margin-top:20px">
                <el-tab-pane label="抽奖设置">
                  <el-row v-for="(item, index) in dataForm.lotteryDetails" :key="index" class="border-buttom">
                    <el-row v-if="index != 0" style="margin:20px 0px 0px 0px;text-align: right;">
                      <el-link :underline="false" type="danger" @click="handleDel(item)">
                        <span style="font-size:12px">移除</span>
                      </el-link>
                    </el-row>
                    <el-row v-if="dataForm.lotteryCate == lotteryCateEnum.card">
                      <el-col :span="8">
                        <el-form-item label="抽奖前图片" :prop="'lotteryDetails.' + index + '.foreImage'"
                          :rules="[{ required: true, message: '抽奖前图片不能为空', trigger: 'blur'}]" style="margin-top:18px">
                          <ImageUploadSingle v-model="item.foreImage"></ImageUploadSingle>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="抽奖后图片" :prop="'lotteryDetails.' + index + '.backgroundImage'"
                          :rules="[{ required: true, message: '抽奖后图片不能为空', trigger: 'blur'}]" style="margin-top:18px">
                          <ImageUploadSingle v-model="item.backgroundImage"></ImageUploadSingle>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="6">
                        <el-form-item label="值类型" :prop="'lotteryDetails.' + index + '.valueType'"
                          :rules="[{ required: true, message: '值类型不能为空', trigger: 'blur'}]" style="margin-top:18px">
                          <el-select
                            v-model="item.valueType"
                            filterable
                            placeholder="请选择抽奖类型"
                            clearable
                            size="small"
                            class="margin-left-xs"
                            style="width:100%"
                          >
                            <el-option
                              v-for="dict in lotteryValueTypeList"
                              :key="dict.value"
                              :label="dict.text"
                              :value="dict.value"
                            />
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="6">
                        <el-form-item label="抽奖值" :prop="'lotteryDetails.' + index + '.value'"
                          :rules="[{ required: true, message: '抽奖值不能为空', trigger: 'blur'}]" style="margin-top:18px">
                          <el-input v-model="item.value" placeholder="请输入抽奖值"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="6">
                        <el-form-item label="显示文本" :prop="'lotteryDetails.' + index + '.content'"
                          :rules="[{ required: true, message: '显示文本不能为空', trigger: 'blur'}]" style="margin-top:18px">
                          <el-input v-model="item.content" placeholder="请输入显示文本"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="6">
                        <el-form-item label="排序" :prop="'lotteryDetails.' + index + '.sort'"
                          :rules="[{ required: true, message: '排序不能为空', trigger: 'blur'}]" style="margin-top:18px">
                          <el-input v-model="item.sort" placeholder="请输入排序"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    
                  </el-row>

                  <div style="margin-top:20px">
                    <el-row type="flex" justify="center">
                      <el-button
                        icon="el-icon-plus"
                        type="primary"
                        @click="handleAddLotteryDetail(sku)"
                        >添加抽奖值</el-button>
                    </el-row>
                  </div>

                </el-tab-pane>
              </el-tabs>
            </el-collapse-item>
          </el-collapse>


        </el-form>
      </div>
      
      <div class="dialog__footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="dataFormSubmit">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getObj, addObj, putObj } from "@/api/shop_operate/lottery";
import {lotteryTypeEnum, lotteryCateEnum,lotteryExchangeCateEnum, lotteryValueTypeEnum} from '@/const/const'
import ImageUploadSingle from '@/components/imageUploadSingle';

export default {
  props:{
    visible: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      activeNames:['1', '2', '3', '4'],
      // 抽奖方式
      lotteryCateEnum,
      // 抽奖兑换方式
      lotteryExchangeCateEnum,
      // 抽奖类型
      lotteryTypeEnum,
      // 抽奖值类型
      lotteryValueTypeEnum,
      canSubmit: false,
      dataForm: {
        status:'1',
        lotteryDetails:[]
      },
      dataRule: {
        lotteryName: [
          { required: true, message: "抽奖名称不能为空", trigger: "blur" },
        ],
        lotteryCate: [
          { required: true, message: "抽奖方式不能为空", trigger: "blur" },
        ],
        countType: [
          { required: true, message: "抽奖次数不能为空", trigger: "blur" },
        ],
        maxCount: [
          { required: true, message: "用户最大次数不能为空", trigger: "blur" },
        ],
        lotteryType: [
          { required: true, message: "抽奖类型不能为空", trigger: "blur" },
        ],
        pointNum: [
          { required: true, message: "单次兑换积分不能为空", trigger: "blur" },
        ],
        status: [
          { required: true, message: "上架状态不能为空", trigger: "blur" },
        ],
        loopCount: [
          { required: true, message: "循环次数不能为空", trigger: "blur" },
        ],
        lotteryExchangeCate:[
          { required: true, message: "兑换方式不能为空", trigger: "blur" },
        ]
      },

      lotteryCateList:[{
        value:lotteryCateEnum.card,
        text:'翻卡片'
      },{
        value:lotteryCateEnum.turntableA,
        text:'转盘A'
      },{
        value:lotteryCateEnum.turntableB,
        text:'转盘B'
      }],

      lotteryTypeList:[{
        value:lotteryTypeEnum.none,
        text:'无次数限制'
      },{
        value:lotteryTypeEnum.count,
        text:'最大次数限制'
      },{
        value:lotteryTypeEnum.loopCount,
        text:'循环次数限制'
      }],

      lotteryValueTypeList:[{
        value:lotteryValueTypeEnum.none,
        text:'无奖品'
      },{
        value:lotteryValueTypeEnum.cash,
        text:'现金'
      },{
        value:lotteryValueTypeEnum.gift,
        text:'礼品'
      }],

      lotteryExchangeCateList:[{
        value:lotteryExchangeCateEnum.none,
        text:'无'
      },{
        value:lotteryExchangeCateEnum.point,
        text:'积分兑换'
      },{
        value:lotteryExchangeCateEnum.scanQrcode,
        text:'扫二维码兑换'
      }],

    };
  },
  components: {
    ImageUploadSingle
  },
  methods: {
    init(id) {
      this.canSubmit = true;
      if(id){
        getObj(id).then((response) => {
          let data = response.data.data
          // 销售价格转元
          //this.dataForm.orderPrice = this.formatMoneyToYuan(this.dataForm.orderPrice)
          data.lotteryDetails.forEach(item=>{

            if(item.foreImage){
              let arr = JSON.parse(item.foreImage)
              if(arr.length > 0){
                item.foreImage = arr[0]
              }
            }

            if(item.backgroundImage){
              let arr = JSON.parse(item.backgroundImage)
              if(arr.length > 0){
                item.backgroundImage = arr[0]
              }
            }

          })

          this.dataForm = data
        });
      } else {
        this.handleAddLotteryDetail()
      }
      
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.canSubmit = false;
          let submitData = {
            id: this.dataForm.id,
            lotteryName: this.dataForm.lotteryName,
            lotteryCate: this.dataForm.lotteryCate,
            lotteryType: this.dataForm.lotteryType,
            lotteryExchangeCate: this.dataForm.lotteryExchangeCate,
            status: this.dataForm.status,
            remark: this.dataForm.remark,
            lotteryDetails:JSON.parse(JSON.stringify(this.dataForm.lotteryDetails))
          }

          if(this.dataForm.lotteryType == lotteryTypeEnum.count){
            // 次数限制的场合
            submitData.maxCount = this.dataForm.maxCount
          } else if(this.dataForm.lotteryType == lotteryTypeEnum.loopCount){
            // 循环限制的场合
            submitData.loopCount = this.dataForm.loopCount
          }

          if(this.dataForm.lotteryExchangeCate == lotteryExchangeCateEnum.point){
            // 积分兑换的场合
            submitData.pointNum = this.dataForm.pointNum
          }

          submitData.lotteryDetails.forEach(item=>{
            if(this.dataForm.lotteryCate == lotteryCateEnum.card){
              item.foreImage = item.foreImage.materialId
              item.backgroundImage = item.backgroundImage.materialId
            } else {
              delete submitData.foreImage
              delete submitData.backgroundImage
            }
          })
          
          console.log(submitData)

          if (submitData.id) {
            putObj(submitData)
              .then((data) => {
                this.$notify.success("修改成功");
                this.$emit("refreshDataList");
                this.closeDialog()
              }).catch(() => {
                this.canSubmit = true;
              });
          } else {
            addObj(submitData)
              .then((data) => {
                this.$notify.success("添加成功");
                this.$emit("refreshDataList");
                this.closeDialog()
              }).catch(() => {
                this.canSubmit = true;
              });
          }
        }
      });
    },
    //重置表单
    closeDialog() {
      this.$emit('update:visible', false)
    },

    /**
     * 删除
     */
    handleDel(item){
      for(let i = 0; i < this.dataForm.lotteryDetails.length; i++){
        if(JSON.stringify(this.dataForm.lotteryDetails[i]) == JSON.stringify(item)){
          this.dataForm.lotteryDetails.splice(i,1)
          break;
        }
      }
    },

    /**
     * 添加抽奖详情
     */
    handleAddLotteryDetail(){
      this.dataForm.lotteryDetails.push({
        lotteryId: this.dataForm.id,
        foreImage:null,
        backgroundImage:null,
        value:null,
        valueType:null,
        content:null,
        sort:null
      })
    }
  },
};
</script>

<style scoped>

.header-icon{
  font-size: 16px;
  margin-right: 10px;
}

.title-size{
  font-size: 16px;
}

.dialog__footer {
  display: block;
  padding: 10px 16px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 1px solid #f0f0f0;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #fff;
  text-align: right;
}

.border-buttom{
  border-bottom: #cccccc solid 1px;
}

.required-table-column{
  margin-right:2px; color:#FF0000
}

/* .el-form-item{
    margin-bottom: 0px;
} */
</style>
